<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="max-age=0">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<title>Minimit Gallery Plugin</title>
<style type="text/css">
[id^="example1a-"], [id^="example1b-"], [id^="example101a-"], [id^="example101b-"], [id^="example2-"], [id^="example3a-"], [id^="example3b-"], [id^="example4a-"], [id^="example4b-"], [id^="example9-"], [id^="example10-"], [id^="example11-"], [id^="example12-"], [id^="example13-"], [id^="example14-"], [id^="example15-"] {
	cursor:pointer;
	font-family: sans-serif;
	color:#3c3c3c;
	border: 1px solid #3c3c3c;
	border-radius: 15px;
	background: #fcfcfc;
	//
	text-decoration: none;
	width:450px;
	height:150px;
	padding:10px 0px 5px 15px;
	margin:10px;
	font-size:20px;
	box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
}
[id^="example1b-"], [id^="example101b-"], [id^="example3b-"], #example2-click-prev, #example2-click-next, #example9-click-prev, #example9-click-next, #example10-click-prev, #example10-click-next, [id^="example12-"], [id^="example13-"], [id^="example14-"], [id^="example15-"] {
	text-decoration: none;
	display:block;
	position:relative;
	float:left;
	width:36px;
	height:16px;
	font-size:12px;
	padding:5px 0px 5px 10px;
	margin:5px;
}
[id^="example4a-"], [id^="example4b-"] {
	display:block;
	position:relative;
	float:left;
	width:45px;
	height:55px;
}
[id^="example9-"] {
	display:block;
	position:absolute;
	width:50px;
	height:50px;
	border-radius:200px;
}
[id^="example10-"], [id^="example11-"] {
	display:block;
	position:absolute;
	width:45px;
	height:55px;
}
[id^="example12-"] {
	width:500px;
	height:16px;
	margin:0px;
	clear:both;
	overflow:hidden;
	margin-top:-1px;
	border-radius:0px;
	box-shadow:2px 3px 0 rgba(0,0,0,0.3);
}
[id^="example13-"] {
	width:440px;
	height:auto;
	clear:both;
	margin:10px;
	border-radius:0px;
	box-shadow:2px 3px 0 rgba(0,0,0,0.3);
}
[id^="example14-"], [id^="example15-"] {
	box-shadow: 2px 3px 0 rgba(0,0,0,0.3);
}
[id^="example1a-"], [id^="example101a-"], [id^="example2-"], [id^="example3a-"], [id^="example3b-item-"] {
	display:block;
	position:absolute;
}
[id^="example2-"], [id^="example3a-"] {
	margin-left:-150px;
}
[id^="example3b-item-"] {
	margin-left:100px;
}
[id^="example1b-"]:hover, [id^="example101b-"]:hover, [id^="example2-"]:hover, [id^="example3a-"]:hover, [id^="example3b-"]:hover, [id^="example4a-"]:hover, [id^="example4b-"]:hover, [id^="example9-"]:hover, [id^="example10-"]:hover, [id^="example11-"]:hover, [id^="example12-"]:hover, [id^="example13-"]:hover, [id^="example14-"]:hover, [id^="example15-"]:hover, [id^="example1b-"].active, [id^="example101b-"].active, [id^="example3b-"].active, [id^="example4a-"].active, [id^="example4b-"].active, [id^="example9-"].active, [id^="example10-"].active, [id^="example11-"].active, [id^="example12-"].active, [id^="example13-"].active, [id^="example14-"].active, [id^="example15-"].active {
	background:#92e8ff;
}
[id^="example1a-"], [id^="example101a-"], [id^="example2-"].active, [id^="example3a-"].active, [id^="example3b-"].active, [id^="example9-"].active, [id^="example10-"].active, [id^="example11-"].active, [id^="example14-"].active, [id^="example15-"].active {
	cursor:default;
}
[id^="example2-"].active, [id^="example3a-"].active {
	background:#fcfcfc;
}
#example3b-click-prev, #example3b-click-next {
	display:block;
	position:relative;
	float:left;
	margin-top:40px;
	top:10px;
	left:190px;
}
#example2-click-prev, #example2-click-next, #example9-click-prev, #example9-click-next {
	top:210px;
	left:200px;
}
#example10-click-prev, #example10-click-next {
	top:250px;
	left:200px;
}
#mycounter {
	text-decoration: none;
	display:block;
	position:relative;
	float:left;
	font-size:12px;
	padding:5px 0px 5px 10px;
	margin:6px 0px;
}
</style>

<script src="mg.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<!-- or <script src="jquery-1.7.min.js" type="text/javascript"></script> -->
<script src="jquery.easing.min.js" type="text/javascript"></script>
<script src="jquery.transform.light.js" type="text/javascript"></script>

</head>
<body>
<div style="display:block;position:relative;">
	<div id="example14-item-0">0</div>
	<div id="example14-item-1">1</div>
	<div id="example14-item-2">2</div>
	<div id="example14-item-3">3</div>
	<div id="example14-item-4">4</div>
	<div id="example14-item-5">5</div>
	<div id="example14-item-6">6</div>
	<div id="example14-item-7">7</div>
	<div id="example14-item-8">8</div>
</div>
<script type="text/javascript">

var example14 = new Mg({
	reference:"example14",
	click:{
		interactive:true,
		multiLess:8, multiPlus:8
	},
	mouseenter:{
		interactive:true,
		multiLess:8, multiPlus:8
	},
	mouseleave:{
		interactive:true,
		multiLess:8, multiPlus:8
	}
});
example14.click.onEvent = function(isInit){
	if(isInit){
		var arr = $('[id^="'+this.reference+'-item-"]');
		for(var i=0;i<arr.length;i++){
			var mypath = $("#"+this.reference+"-item-"+i);
			mypath.css("top",(i*28)).css("position", "absolute").css("width", 100);
		}
	}else{
		$("#"+this.reference+"-item-"+this.deactivated).removeClass("active");
		$("#"+this.reference+"-item-"+this.activated).addClass("active");	
	}
}
example14.mouseenter.onEvent = function(isInit){
	var arr = this.multiActivated;
	for(var i=0;i<arr.length;i++){
		var depth = example14.mapDistance(this.multiLess, i, arr.length, 0);
		var depth2 = example14.mapDistanceReverse(this.multiPlus, i, arr.length, 0);
		var mypath = $("#"+this.reference+"-item-"+arr[i]);
		mypath.css("z-index",Math.abs(depth2)+this.multiPlus);
		mypath.stop().animate({transform:'rotate('+(-depth*6)+'deg)'},{queue:true, duration:400, specialEasing: {transform:'easeOutExpo'}});
		mypath.animate({marginTop:depth*2},{queue:false, duration:400, specialEasing: {marginTop:'easeOutExpo'}});
		if(arr[i]==this.activated){
			mypath.animate({marginLeft:-10},{queue:false, duration:400, specialEasing: {marginLeft:'easeOutExpo'}});
		}else{
			mypath.animate({marginLeft:0},{queue:false, duration:400, specialEasing: {marginLeft:'easeOutExpo'}});
		}
	}
}
example14.mouseleave.onEvent = function(isInit){
	var arr = this.multiActivated;
	for(var i=0;i<arr.length;i++){
		var rotation = 0;
		var mypath = $("#"+this.reference+"-item-"+arr[i]);
		mypath.css("z-index", i);
		mypath.stop().animate({transform:'rotate('+rotation+'deg)'},{queue:true, duration:400, specialEasing: {transform:'easeOutExpo'}});
		mypath.animate({marginTop:0},{queue:false, duration:400, specialEasing: {marginTop:'easeOutExpo'}});
		mypath.animate({marginLeft:0},{queue:false, duration:400, specialEasing: {marginLeft:'easeOutExpo'}});
	}
}
example14.init();
</script>

</body>
</html>